<template>
  <div class="all">
    <!-- <div class="name_bar">{{username}}</div>
    <div class="subject_name">训练模式</div>
    <div class="train_all_map" @click="open_complete_map">
     (点此查看完整地图)
    </div>
    <div class="exit_Train" @click="goBack">退出</div> -->
    <div class="all_content">
      <div class="name_bar">
        <i class="iconfont icon-xingming">
          <span>{{username}}</span>
        </i>
      </div>
      <div class="city_map">
        <i class="iconfont icon-dituquanlan">
          <span @click="open_complete_map">全市一览图</span>
        </i>
      </div>
    </div>
    <div class="all_content">训练模式</div>
    <div class="all_content">
      <div class="exit">退出</div>
    </div>
  </div>

</template>

<script>
  export default {
    name:'TrainTopBar',
    data(){
      return{

      }
    },
    computed:{
      username(){
        // return this.$store.state.response.Name
        let data =  JSON.parse(localStorage.getItem('familiar_with_qujingmap_userinfo'))
        // console.log('用户数据：',data.Name)
        return data.user_name
      }
    },
    methods:{
      goBack(){
        this.$store.commit('setexit_sure_status',true)
      },
      open_complete_map(){
        // console.log('this.$store.open_complete_train_map',this.$store.state.open_complete_train_map)
        if(this.$store.state.open_complete_train_map){
          this.$store.commit('set_open_complete_train_map',false)
        }else{
          this.$store.commit('set_open_complete_train_map',true)
        }
      }
    }
  }
</script>

<style scoped>
  .all{
    width: 100vw;
    height: 5vh;
    /* background-color: #3e6388; */
    background: linear-gradient(to right,#1c1c1c,#a9a9a9);
    color: white;
    float: left;
    box-sizing: border-box;
    border: 1px solid black;
    box-shadow: 1px 1px 2px 2px black inset;
    box-sizing: border-box;
  }
  .all_content{
    width: 33.333%;
    height: 100%;
    background-color: red;
    float: left;
    box-sizing: border-box;
    border-right: 1px solid black;
    text-align: center;
    line-height: 5vh;
    font-size: 1.5vw;
  }
  .name_bar{
    /* width: 5vw;
    height: 5vh;
    font-size: 0.5vw;
    //background-color: red;
    text-align: center;
    line-height: 5vh;
    float: left; */
    width: 20%;
    height: 100%;
    /* background-color: rgb(29, 29, 28); */
    line-height: 5vh;
    text-align: left;
    font-size: 1vw;
    float: left;
    box-sizing: border-box;
    padding-left: 1vw;
  }
  .name_bar i{
    font-size: 1.5vw;
  }
  .name_bar span{
    font-size: 1vw;
  }
  .city_map{
    width: 30%;
    height: 100%;
    /* background-color: black; */
    float: left;
  }
  .city_map span{
    font-size: 1vw;
  }
  .city_map i{
    font-size: 1.5vw;
  }
  .city_map i:hover{
    color: yellowgreen;
    cursor: pointer;
  }
  .city_map i:active{
    color: rgb(231, 155, 14);
    cursor: pointer;
  }

  .phone_bar{
    width: 10vw;
    height: 5vh;
    //background-color: #0c6767;
    text-align: center;
    line-height: 5vh;
    float: left;
  }
  .subject_name{
    width: 20vw;
    height: 5vh;
    /*background-color: #c1945f;*/
    float: left;
    margin-left: calc(46% - 7.5vw);
    text-align: center;
    line-height: 5vh;
    font-size: 1.5vw;
  }
  .train_all_map{
    float: left;
    position: relative;
    top: 2vh;
    left: -7vw;
    color: #b7e6de;
    /*background-color: yellow;*/
  }
  .train_all_map:hover{
    color: #e3cc59;
    cursor: pointer;
  }
  .train_all_map:active{
    color: #e39059;
  }

  .exit_Train{
    width: 5vw;
    height: 4vh;
    //background-color: darkseagreen;
    float: right;
    margin-top: 0.4vh;
    box-sizing: border-box;
    font-size: 0.5vw;
    //border: solid black 1px;
    //margin-right: 0.7vw;
    text-align: center;
    line-height: 4vh;
  }
  .exit_Train:hover{
    color: red;
    //box-shadow: 2px 2px 2px 2px red inset;
    cursor: pointer;
    border-radius: 5px;
    border: dashed red 1px;
    font-weight: bolder;
    //background: linear-gradient(to right, #44dd11, #78bc14);
  }
  .exit_Train:active{
    color: greenyellow;
    //box-shadow: 2px 2px 2px 2px greenyellow inset;
  }


  .all_content .exit{
    width: 15%;
    height: 100%;
    background-color: rgb(182, 182, 173);
    position: relative;
    left: 85%;
    font-size: 1vw;
  }


</style>